import React, { Component } from 'react'
import {NavLink,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import './App.css'

export default class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* react中是用Link组件（路由链接）完成路径的切换，完成导航 */}
							<NavLink activeClassName="atguigu" className="list-group-item" to="/guanyu">About</NavLink>
							<NavLink activeClassName="atguigu" className="list-group-item" to="/zhuye">Home</NavLink>

							{/* 原生html靠a标签实现页面的跳转，完成导航 */}
							{/* 
								<a className="list-group-item active" href="./about.html">About</a>
								<a className="list-group-item" href="./home.html">Home</a>
							 */}
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								{/* 注册路由（配置路由信息） */}
								<Route path="/guanyu" component={About}/>
								<Route path="/zhuye" component={Home}/>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
